<template>

	<view class="content">
		<view class="headBar">
			<view class="navBack" @click="goBack()">
				<uni-icons type="left" size="16"></uni-icons>
			</view>
			<view class="title">
				登录
			</view>
		</view>

		<view class="container">


			<view class="labelBack">
				<image src="https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/static/home/login_top_title.png"
					mode="aspectFit"></image>
			</view>

			<view class="btnArea">
				<view class="login-btn">
					<!-- 获取微信用户信息 -->
					<button class="button btn-normal" @click.stop="login()">授权登录</button>
				</view>
				<view class="no-login-btn">
					<button class="button btn-normal" @click="handleCancel">暂不登录</button>
				</view>
			</view>



			<view class="agreement">
				<view class="icon" @click="changeFlag()">
					<uni-icons type="checkbox-filled" size="23" v-if="flag"></uni-icons>
					<uni-icons type="circle" size="23" v-else></uni-icons>

				</view>

				<view class="desc">
					我已阅读并同意
				</view>

				<view class="agree" @click="toAgreement()">
					{{agreeText}}
				</view>



			</view>






		</view>



	</view>

</template>

<script>
	import {
		isEmpty
	} from '@/utils/util'
	import * as shareApi from '@/api/pay/pay.js'
	import * as LoginApi from '@/api/user/login.js'
	export default {
		data() {
			return {
				agreeText: '《长白生命用户协议》',
				//是否勾选协议
				flag: false

			}
		},
		onLoad() {

		},
		methods: {
			changeFlag() {
				this.flag = !this.flag

			},
			//退回个人中心
			goBack() {
				uni.$toPage('/pages/my/my')
			},

			toAgreement() {
				uni.$toPage('/subpkg/userAgreement/userAgreement')
			},

			login() {

				if (this.flag === false) {
					return uni.$showMsg('请先勾选用户协议')
				}


				let app = this;
				uni.showModal({
					mask: 'true',
					title: '温馨提示',
					content: '授权微信登录后才能使用小程序',
					success(res) {
						if (res.confirm) {
							uni.login().then(async (lres) => {
								console.log(lres);
								try {
									// 通过 lres.code 获取登录凭证 
									const res = await LoginApi.login(lres[1].code);
									console.log(res)
									const token = res.data.data;
									uni.setStorageSync('token', token);
									console.log("获取到了token数据");
									console.log(token);
									uni.setStorageSync('token', token)
									if (token) {
										uni.$showMsg("登录成功");
										let scene = uni.getStorageSync('scene');
										if (scene !== null && scene !== undefined && scene !== ''&& scene !== 'undefined') {
											console.log("登录这里调用了")
											console.log(scene)
											app.bindFriend(scene);
										}


										uni.$toPage('/pages/my/my', {
											// 后期可以传递默认昵称和头像
											nickName: '',
											avtaUrl: ''
										})
									}
								} catch (error) {
									console.error('发生错误：', error);
								}
							});
						}
					}
				})
			},

			//点击不登录返回个人中心页面
			handleCancel() {
				uni.$toPage('/pages/my/my')
			},
			//好友绑定
			async bindFriend(scene) {
				const res = await shareApi.Bindwx(scene);
				console.log("好友绑定")
				console.log(res)

			},




		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}

	.content {
		height: 100vh;
		overflow: hidden;

		.headBar {
			position: relative;
			height: 190rpx;
			width: 100vw;
			box-sizing: border-box;

			.title {
				position: absolute;
				left: 350rpx;
				bottom: 28rpx;
			}

			.navBack {
				position: absolute;
				left: 20rpx;
				bottom: 20rpx;
				width: 58rpx;
				height: 58rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}

		}

		.container {

			padding: 0 60rpx;
			font-size: 32rpx;
			// background: #fff;
			min-height: 100vh;

			.btnArea {
				margin-top: 50rpx;

				.login-btn {
					padding: 0 20rpx;

					.button {
						height: 88rpx;
						background: #0ebe14;
						color: #fff;
						font-size: 30rpx;
						border-radius: 999rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}


				.no-login-btn {
					margin-top: 40rpx;
					padding: 0 20rpx;

					.button {
						height: 88rpx;
						background: #dfdfdf;
						color: black;
						font-size: 30rpx;
						border-radius: 999rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}



			}

			.labelBack {

				width: 80vw;
				image{
				 width: 100%;
				}
			}



			.agreement {
				position: absolute;
				bottom: 120rpx;
				margin-left: 22rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.icon {
					margin-right: 8rpx;
				}


				.desc {
					color: darkgray;
				}


				.agree {
					color: #0ebe14;
				}
			}

		}


	}
</style>